<template>
	<div class="layout-flex">
		<div class="tabHeader">
			<el-tabs v-model="state.activeName" class="header-tabs" @tab-change="handleChange">
				<el-tab-pane v-for="tab in state.headerTabsList" :key="tab.value" :label="tab.label" :name="tab.value"></el-tab-pane>
			</el-tabs>
		</div>
		<FastFilter @search="toRefresh" @reset="resetList">
			<template v-slot:leftFilters>
				<pop-cascader
					@query-list="handleSearch($event, 'whIds')"
					:options="state.activeName === '0' ? state.whsList : state.FBAlist"
					v-model="state.queryForm.whIds"
					:placeholder="state.activeName === '0' ? '仓库' : 'FBA仓库'"
					:confirmDatatype="'1'"
					class="mr10 w180"
				/>
			</template>
		</FastFilter>
		<div class="layout-padding">
			<FastTableHandle @queryTable="toRefresh(false)">
				<template v-slot:rightWrapper>
					<el-icon @click="toExport" v-if="getAuth('wms_wmsWarehouseInventory_export')">
						<Download />
					</el-icon>
					<el-icon>
						<Setting @click="columnsSettingRef.openDialog()" />
					</el-icon>
				</template>
			</FastTableHandle>
			<whsList :queryForm="state.queryForm" :thList="state.activeName === '0' ? columnsData.whsInveList : columnsData.FBAList" ref="whsListRef" />
		</div>

		<ColumnsSetting
			ref="columnsSettingRef"
			@changeColumn="changeColumn"
			:allList="state.activeName === '0' ? columns['whsInveList'] : columns['FBAList']"
			:commitName="state.activeName === '0' ? 'whsInveList' : 'FBAList'"
			:list="state.activeName === '0' ? columnsData['whsInveList'] : columnsData['FBAList']"
		/>
	</div>
</template>
<script lang="ts" setup  name="warehouseInventory">
import { Local } from '/@/utils/storage';
const ColumnsSetting = defineAsyncComponent(() => import('../columnsSetting/index.vue'));
import { columns } from '../columnsSetting/columns.js';
import { getwhTree } from '/@/api/transferSlip/index';
import { wmsWarehouseExport } from '/@/api/inventory/index';
const whsList = defineAsyncComponent(() => import('./whsList.vue'));
import { auth } from '/@/utils/authFunction';
const getAuth = (value: string) => {
	return auth(value);
};
const state = reactive({
	activeName: '0',
	headerTabsList: [
		{ label: '供应商仓/自营仓/三方仓', value: '0' },
		{ label: 'FBA仓', value: '1' },
	],
	whsList: [],
	FBAlist: [],
	queryForm: {
		whIds: [],
		whType: '0',
	},
});
const whsListRef = ref();
const columnsSettingRef = ref();
// 列设置
const columnsData = reactive({
	FBAList: Local.get('FBAList') || columns.FBAList,
	whsInveList: Local.get('whsInveList') || columns.whsInveList,
});
const changeColumn = (list) => {
	if (state.activeName === '0') {
		columnsData.whsInveList = list;
	} else {
		columnsData.FBAList = list;
	}
};
onMounted(() => {
	getwhTreeOpt();
});
const toExport = () => {
	wmsWarehouseExport({ query: state.queryForm })
		.then(() => {
			ElMessage({
				message: '下载成功，请至【下载中心】下载查看',
				type: 'success',
			});
		})
		.catch((res) => {
			ElMessage({
				message: res.msg,
				type: 'error',
			});
		});
};
const handleSearch = (ids: string[], type) => {
	state.queryForm[type] = ids;
	toRefresh();
};
const handleChange = (v) => {
	state.queryForm.whType = v;
	state.queryForm.whIds = [];
	toRefresh();
};
const resetList = () => {
	state.queryForm.whIds = [];
	toRefresh();
};
const toRefresh = (v) => {
	whsListRef.value.toRefresh(v);
};
// 获取仓库树形结构
const getwhTreeOpt = async () => {
	const { data } = await getwhTree({ whTypeList: [1, 2, 3] });
	const { data: FBAlist } = await getwhTree({ whTypeList: [4] });
	state.whsList = formatWhTree(data);
	state.FBAlist = formatWhTree(FBAlist);
};
// 初始化仓库树形结构
const formatWhTree = (data) => {
	return data.map((item) => {
		item.key = item.nodeCode;
		item.label = item.nodeName;
		if (item.children) {
			item.children = formatWhTree(item.children);
		}
		return item;
	});
};
</script>
<style scoped>
.tabHeader {
	padding: 0 20px 0 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid #efefef;
}

.header-tabs :deep(.el-tabs__header) {
	margin-bottom: 0;
}
</style>